<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      img {
        display: block;
      }
      ul {
        list-style: none;
      }
      #main {
        width: 535px;
        height: 535px;
        background: url(./board.png);
        margin: 50px auto;
        position: relative;
      }
      #main .pan {
        box-sizing: border-box;
        width: 490px;
        height: 490px;
        position: absolute;
        left: 22px;
        top: 22px;
      }
      #main .pan li {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        position: absolute;
        cursor: pointer;
      }
      #restart {
        width: 100px;
        height: 40px;
        background: #ccc;
        color: #fff;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        margin: auto;
        cursor: pointer;
        display: none;
      }
    </style>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
      window.onload = function () {
        var pan = document.getElementsByClassName("pan")[0];
        var play = true; //棋子黑白切换
        var allArr = []; //所有棋数组x,y
        var win = []; //赢棋数组
        var count = 0; //赢法编号
        var baiWin = []; //白棋赢法数组
        var heiWin = []; //黑棋赢法数组
        var over = false; //游戏是否结束

        //所有棋子布局在棋盘上
        for (x = 0; x < 15; x++) {
          for (y = 0; y < 15; y++) {
            let li = document.createElement("li");
            li.style.left = x * 35 - 13 + "px";
            li.style.bottom = y * 35 - 13 + "px";
            //给每个棋子标记编号x，y
            li.setAttribute("data-index", `${x},${y}`);
            pan.appendChild(li);
          }
        }
        //把赢棋数组设置为三维数组(i为x，j为y，k为赢棋编号)
        for (var i = 0; i < 15; i++) {
          win[i] = [];
          for (var j = 0; j < 15; j++) {
            win[i][j] = [];
          }
        }

        //横线赢法
        for (var i = 0; i < 15; i++) {
          for (var j = 0; j < 11; j++) {
            for (var k = 0; k < 5; k++) {
              win[j + k][i][count] = true;
            }

            count++;
          }
        }
        //竖线赢法
        for (var i = 0; i < 15; i++) {
          for (var j = 0; j < 11; j++) {
            for (var k = 0; k < 5; k++) {
              win[i][j + k][count] = true;
            }

            count++;
          }
        }
        //左斜线赢法
        for (var i = 0; i < 11; i++) {
          for (var j = 0; j < 11; j++) {
            for (var k = 0; k < 5; k++) {
              win[i + k][j + k][count] = true;
            }

            count++;
          }
        }
        //右斜线赢法
        for (var i = 4; i < 15; i++) {
          for (var j = 0; j < 11; j++) {
            for (var k = 0; k < 5; k++) {
              win[i - k][j + k][count] = true;
            }

            count++;
          }
        }

        //初始化白棋和黑棋的赢法数组
        for (var i = 0; i < count; i++) {
          baiWin[i] = 0;
          heiWin[i] = 0;
        }

        //游戏结束后点击重新开始按钮重载页面
        function restart() {
          $("#restart")
            .css({
              display: "block",
            })
            .click(function () {
              window.location.reload();
            });
        }

        //改变棋子颜色，将棋子信息插入
        function bai(e) {
          let target = e.target || window.event.srcElement;
          target.style.background = "#fff";
          var baiindex = target.getAttribute("data-index");
          allArr.push(baiindex);
          var baiX = baiindex.split(",")[0];
          var baiY = baiindex.split(",")[1];
          for (var i = 0; i < count; i++) {
            if (win[baiX][baiY][i]) {
              baiWin[i]++;
              if (baiWin[i] == 5) {
                alert("白棋获胜");
                over = true;
                restart();
              }
            }
          }
        }
        function hei(e) {
          let target = e.target || window.event.srcElement;
          target.style.background = "#000";
          var heiindex = target.getAttribute("data-index");
          allArr.push(heiindex);
          var heiX = heiindex.split(",")[0];
          var heiY = heiindex.split(",")[1];
          for (var i = 0; i < count; i++) {
            if (win[heiX][heiY][i]) {
              heiWin[i]++;
              if (heiWin[i] == 5) {
                alert("黑棋获胜");
                over = true;
                restart();
              }
            }
          }
        }
        //判断玩家点的地方是否已经有棋子
        function noDown(data) {
          let yes = true;
          for (let n = 0; n < allArr.length; n++) {
            if (data == allArr[n]) {
              yes = !yes;
            }
          }
          return yes;
        }
        //点击给棋子赋予不同颜色
        $("#main .pan li").click(function (e) {
          if (over) {
            return;
          }
          let target = e.target || window.event.srcElement;
          var dataIndex = target.getAttribute("data-index");
          if (noDown(dataIndex)) {
            if (play) {
              bai(e);
              play = !play;
            } else {
              hei(e);
              play = !play;
            }
          } else {
            alert("这里已经有棋子了！");
          }
        });
        $("#main .pan li")
          .mouseenter(function (e) {
            let target = e.target || window.event.srcElement;
            let dataIndex = target.getAttribute("data-index");
            let color = "";
            if (play) {
              color = "#fff";
            } else {
              color = "#000";
            }
            if (noDown(dataIndex)) {
              $(this).css({
                background: color,
              });
            }
          })
          .mouseleave(function (e) {
            let target = e.target || window.event.srcElement;
            let dataIndex = target.getAttribute("data-index");
            if (noDown(dataIndex)) {
              $(this).css({
                background: "none",
              });
            }
          });
      };
    </script>
  </head>
  <body>
    <div id="main">
      <ul class="pan"></ul>
    </div>
    <div id="restart">重新开始</div>
  </body>
</html>
